<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/14
  Time: 17:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%--<html xmlns="http://www.w3.org/1999/xhtml">--%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="html/css/style.css"/>
    <script type="text/javascript" src="html/scripts/function.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/tittlebox.js"></script>
</head>
<style>

    body {
        background: white;
        padding: 20px;
    }

    marquee {
        /*font-weight: bolder;*/
        font-size: 5px;
        color: transparent;
    }

    .putincar {
        float: right;
        margin-top: 1px;
        margin-right: 40px;
    }

    #gobuy {
        height: 32px;
        color: black;
        font-size: 18px;
        letter-spacing: 2px;
        border: none;
        width: 150px;
        background-color: #FFF8E7;
        text-decoration: none;
    }

    #submit {
        height: 32px;
        color: black;
        font-size: 18px;
        letter-spacing: 2px;
        border: none;
        width: 150px;
        background-color: #FFF8E7;
    }

    #submit:hover, #gobuy:hover {
        cursor: pointer;
    }

    /* 清除默认样式 */
    *{
        margin: 0;
        padding: 0;
    }

    /* 左边小盒子样式 */
    .box1{
        position: relative;
        width: 310px;
        height: 310px;
        border: 1px solid #999;
        margin-left: 0px;
        margin-top: 0px;
    }
    .box1 .img1{
        /* 设置左边图片大小 */
        width: 310px;
    }

    /* 遮罩层bg的样式 */
    .box1_bg{
        /* 一开始要隐藏起来 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        background-color: yellow;
        /* 透明效果 */
        opacity: .5 ;
        cursor: move;
        z-index:10;
    }
    #box2_bg{
        /* 一开始要隐藏起来 */
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 310px;
        height: 210px;
        background-color: transparent;
        z-index:9;
        /* 透明效果 */
        /*opacity: .6 ;*/
        /*cursor: move;*/
    }

    /* 右边大盒子样式 */
    .big_img{
        /* 一开始要隐藏起来 */
        display: none;
        width: 540px;
        height: 540px;
        position: absolute;
        top: 0;
        left: 470px;
        border: 1px solid #999;
        overflow: hidden;
    }
    /* 大盒子里面的图片样式 */
    .big_img .big_imgs{
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
    }
</style>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="html/images/logo.gif"/></div>
    <div class="help"><a href="/shopping/html/ShowProductInCarServlet" class="shopping">购物车</a>
        <a href="guestbook.jsp">留言</a></div>
    <script>
        var name = "${sessionScope.user.username}";
        console.log(name);
        if (name == "") {
            $(".help").append("<a href=\"login.jsp\">登录</a><a href=\"register.jsp\">注册</a>");
        } else {
            $(".help").append("<a href='html/LogOutServlet'>欢迎" + name + "登录，点击注销</a>")
        }
    </script>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">百货</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音乐</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
            <li><a href="#">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="position" class="wrap">
    您现在的位置：<a href="index.jsp">易买网</a> &gt; <a href="product-list.html">图书音像</a> &gt; 图书
</div>
<div id="main" class="wrap">
    <div class="lefter">
        <div class="box">
            <h2>商品分类</h2>
            <dl>
                <dt>图书音像</dt>
                <dd><a href="product-list.html">图书</a></dd>
                <dd><a href="product-list.html">音乐</a></dd>
                <dt>百货</dt>
                <dd><a href="product-list.html">运动健康</a></dd>
                <dd><a href="product-list.html">服装</a></dd>
                <dd><a href="product-list.html">家居</a></dd>
                <dd><a href="product-list.html">美妆</a></dd>
                <dd><a href="product-list.html">母婴</a></dd>
                <dd><a href="product-list.html">食品</a></dd>
                <dd><a href="product-list.html">手机数码</a></dd>
                <dd><a href="product-list.html">家具首饰</a></dd>
                <dd><a href="product-list.html">手表饰品</a></dd>
                <dd><a href="product-list.html">鞋包</a></dd>
                <dd><a href="product-list.html">家电</a></dd>
                <dd><a href="product-list.html">电脑办公</a></dd>
                <dd><a href="product-list.html">玩具文具</a></dd>
                <dd><a href="product-list.html">汽车用品</a></dd>
            </dl>
        </div>
    </div>
    <script>
        loadBox();
    </script>
    <div id="product" class="main">


        <h1 id="commodity_name">${requestScope.commodity.commodity_name}</h1>
        <div class="infos">
            <div class="thumb">
            <div class="box1">
                <img class="img1" src="html/images/product/${requestScope.commodity.pic}"
                                         style="width: 310px;height: 310px" alt="#"/>

                <%--    <img class="img1" src="html\images\product\Redmi旅行箱.jpg" alt="#" >--%>
                <div class="box1_bg" onclick="video()"></div>
                <div class="big_img">
                    <img class="big_imgs" src="html/images/product/${requestScope.commodity.pic}" alt="#" >
                </div>
                    <div id="box2_bg" >

                    </div>
                    <div id="v_m" style="display: none">
                        <video id="myvideo" width="310" height="280" controls autoplay>
                            <source src="html/images/product/${requestScope.commodity.video}" type="video/mp4">
                        </video>
                        <div>
                            <h3>點擊關閉視頻</h3>
                        </div>
                    </div>
            </div>
            </div>
            <div class="buy">
                <p id="now_price">商城价：<span class="price">￥<span
                        class="price realprice">${requestScope.commodity.now_price}</span></span></p>
                <p id="original_price">原　价：<span
                        style="text-decoration: line-through">${requestScope.commodity.original_price}</span></p>
                <p id="productcolor">颜　色：${requestScope.commodity.productcolor}</p>
                <p id="productbrand">品　牌：${requestScope.commodity.productbrand}</p>
                <p id="num">库　存：${requestScope.commodity.num}</p>
                <div class="button">

                    <div class="putincar">
                        <input type="hidden" id="productid" name="productid"
                               value="${requestScope.commodity.commodity_id}"/>
                        <input type="hidden" id="productname" name="productname"
                               value=${requestScope.commodity_name}""/>
                        <input type="hidden" id="price" name="price" value="${requestScope.now_price}"/>
                        <button id="submit">放入购物车</button>
                        <input id="gobuy" type="submit" value="立即购买"></input>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="introduce">
            <h2><strong>商品详情</strong></h2>
            <div class="text">
                ${requestScope.commodity.content} <br/>
                喜欢就快下单吧！<br/>
            </div>
        </div>

    </div>
    <div class="clear"></div>
    <div class="guestbook">
        <h2>全部评论</h2>
        <ul>

        </ul>
        <div class="clear"></div>
        <div class="pager">
            <ul class="clearfix">
                <li><a href="javascript:Message_load(--pNumMsg)">上一页</a></li>
                <li><a href="javascript:Message_load(++pNumMsg)">下一页</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="footer">
    Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
<script>
    var data_Msg;
    var pNumMsg = 1;
    var commodity_id = "${requestScope.commodity.commodity_id}";
    var Message_load = function Message_load(pagenum, commodity_id) {
        $.ajax({
            type: "POST",
            url: "SelMessageServlet",
            data: {
                op: "PLlist",
                pagenum: pagenum,
                commodity_id: commodity_id
            },
            dataType: "Json",
            success: function (data) {				//成功后触发
                if (data != null) {
                    $(".guestbook").children("ul").find("li").remove();
                    $.each(data.list, function (index, object) {
                        var html = "";
                        html += "<li>\n" +
                            "                    <dl>\n" +
                            "                        <dt>" + object.context + "</dt>\n" +
                            "                        <dd class=\"author\">网友：" + object.user.username + " <span class=\"timer\">" + object.time + "</span></dd>\n";
                        if (object.respcontext != null) {
                            html += "                        <dd>管理员回复：" + object.respcontext + "</dd>\n" +
                                "                        <dd>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</dd>\n" +
                                "                    </dl>\n" +
                                "                </li>"
                        } else {
                            html += "                        <dd>暂无回复</dd>\n" +
                                "                        <dd>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</dd>\n" +
                                "                    </dl>\n" +
                                "                </li>"
                        }
                        $(".guestbook").children("ul").append(html);
                    })
                    data_Msg =data.list;
                    pNumMsg = parseInt(data.Msg_N);
                    // x_msg();
                } else {

                }
            },
            error: function (jqxhr, textstatus, errorThrown) {		//发生错误时触发
                console.log(errorThrown);
            }
        })
    }
    Message_load(pNumMsg, commodity_id);


    // var index_msg = 0;
    // function x_msg() {
    //     console.log("13123123");
    //     var size_msg = parseInt(data_Msg.length);
    //     console.log(data_Msg);
    //     if(index_msg<size_msg){
    //         ;
    //         var marquee_Msg = "<marquee direction='right'>"+data_Msg[index_msg].user.username+":"+data_Msg[index_msg].context+"</marquee>";
    //         $("#box2_bg").append(marquee_Msg);
    //         index_msg++;
    //         var time = setTimeout("x_msg",500);
    //     }
    // }


    var pNum_video = 1;
    var commodity_idvideo = "${requestScope.commodity.commodity_id}";
    var Message_loadvideo = function Message_loadvideo(pagenum, commodity_id) {
        $.ajax({
            type: "POST",
            url: "SelMessageServlet",
            data: {
                op: "PLlist",
                pagenum: pagenum,
                commodity_id: commodity_id
            },
            dataType: "Json",
            success: function (data) {				//成功后触发
                if (data != null) {
                    $("#box2_bg").html("");
                    $.each(data.list, function (index, object) {
                        var marquee_Msg ="<marquee direction='right' style='color: white' >"+object.user.username+":"+object.context+"</marquee>"
                        $("#box2_bg").append(marquee_Msg);
                    })
                    pNum_video = parseInt(data.Msg_N);
                    setTimeout("Message_loadvideo("+ ++pNum_video +","+commodity_id+")", 6000);
                }
            },
            error: function (jqxhr, textstatus, errorThrown) {		//发生错误时触发
                console.log(errorThrown);
            }
        })
    }
    Message_loadvideo(pNumMsg, commodity_id);


</script>
</body>
<script>
    $(function () {
        $("#productname").val($('#commodity_name').text());
        $('#price').val($(".realprice").text());
        $("#gobuy").on('click', function () {
            $.ajax({
                url: "/shopping/html/BuyServlet",
                type: "post",
                data: {
                    productname: $("#productname").val(),
                    userid:${sessionScope.user.userid},
                    price: $("#price").val(),
                    productid: $('#productid').val()
                },
                success: function (data) {
                    $(location).attr('href', '/shopping/html/buy-result.jsp');
                }
            })
        })

        $("#submit").on('click', function () {
            $.ajax({
                url: "/shopping/html/PutInCarServlet",
                type: "post",
                data: {
                    productname: $("#productname").val(),
                    userid:${sessionScope.user.userid},
                    price: $("#price").val(),
                    productid: $('#productid').val()
                },
                success: function (data) {
                    alert("添加到购物车成功")
                }
            })
        })
    })
</script>
<script>
    // ①整个案例可以分为三个功能模块
    // ②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开-->隐藏2个盒子功能
    // ③黄色的遮挡层 跟随 鼠标功能。
    // ④移动黄色遮挡层,大图片跟随移动功能。
    // 事件源：
    var box1 = document.querySelector('.box1');
    var bg = document.querySelector('.box1_bg');
    var big = document.querySelector('.big_img');
    // 1. 鼠标 经过 盒子的时候，显示 遮罩层 和 放大镜
    box1.addEventListener('mouseover',function(){
        bg.style.display = 'block';
        big.style.display = 'block';
    })
    // 2. 鼠标 离开 盒子的时候，隐藏 遮罩层 和 放大镜
    box1.addEventListener('mouseout',function(){
        bg.style.display = 'none';
        big.style.display = 'none';
    })

    // 2.鼠标移动的时候
    box1.addEventListener('mousemove',function(e){
        var x = e.pageX - this.offsetLeft; // x是鼠标到父盒子x距离
        var y = e.pageY - this.offsetTop; // y是鼠标到父盒子y距离
        // console.log(x ,y)
        // 最大移动距离，box1盒子的大小 减去 遮罩层的盒子大小
        var max_x = box1.offsetWidth - bg.offsetWidth;
        var max_y = box1.offsetHeight - bg.offsetHeight;
        if( max_x >=0 )
            // *将坐标减去 遮罩层盒子的一半 鼠标就落到遮罩层的中间
            // 移动距离X,Y
            var X = x - bg.offsetWidth/2;
        var Y = y - bg.offsetHeight/2;
        // *当遮罩层超出 box1 的边框的时候，设一个边界卡住它
        if(X <= 0 ){
            X = 0
        }else if( X >= max_x){
            X = max_x;
        }
        if(Y <= 0 ){
            Y=0
        }else if( Y >= max_y){
            Y = max_y;
        }
        // *把鼠标在盒子内的坐标给 遮罩层 实现跟随鼠标移动效果
        // 注意加上 px 不然不起效果
        bg.style.left = X +'px';
        bg.style.top = Y +'px';

        // 右边图片跟随移动，有一个小算法：big_img_x
        // 遮挡层移动距离（X）/遮挡层最大移动距离（max_x）=大图片移动距离（bigX)/大图片移动的最大距离（big_img_x)

        // 获取 图片 事件源
        var big_img = document.querySelector('.big_imgs');
        // big_img_x 求大图片移动的最大距离 正方形 距离一样的
        var big_img_x = big_img.offsetWidth - big.offsetWidth ;
        var big_img_y = big_img.offsetWidth - big.offsetWidth ;
        // bigX 大图片的移动距离
        var bigX = X * big_img_x / max_x ;
        var bigY = Y * big_img_y / max_x ;
        big_img.style.left = -bigX +'px';
        big_img.style.top = -bigY +'px';
    })
</script>
<script>
    var myvideo = document.getElementById("myvideo");
    var type_video = 1;
    myvideo.pause();
    function video() {
        if(type_video == 1){
            console.log("video");
            $(".img1").css("display","none");
            $(".big_img").css("display","none");
            $(".box1_bg").css("display","none");
            $("#v_m").show();
            $("marquee").css("color","white");
            // $("#box2_bg").show();
            myvideo.play();
            type_video = 2;
        }else{
            console.log("remove");
            $(".img1").show();
            $(".big_img").show();
            $(".box1_bg").show();
            $("#v_m").css("display","none");
            // $("#box2_bg").css("display","none");
            $("marquee").css("color","transparent");
            myvideo.pause();
            type_video = 1;
        }

    }

    function remove() {
        console.log("remove");
        $(".img1").show();
        $(".big_img").show();
        $(".box1_bg").show();
        $("#v_m").css("display","none");
        // $("#box2_bg").css("display","none");
        myvideo.pause();
    }
</script>
</html>

